<template>
  <div>
    <div class="message_title">
      <h1 >系统消息</h1>
      <v-switch

          v-model="only_show_not_read"
          inset
          :label="'仅显示未读消息'"
      ></v-switch>
    </div>
    <v-divider style="margin-bottom: 1%"></v-divider>


    <div v-for="(item,index) in this.notification_list" :key="index" style="margin-bottom: 1%">
      <div v-if="(!only_show_not_read) || (only_show_not_read && !item.is_read)" >
        <div  style="  display: flex; justify-content: space-between; ">
          <div class="message" style="max-width: 80%; min-width: 80%; display: inline-block; margin-left: 0.5%">
            <div style="display: flex">
              <div v-if="!item.is_read" style="font-size: 17px; color: red" >*</div>
              <div @click="ToProfile(item.url)" v-if="item.is_read || !item.is_read" style="font-size: 17px" >{{item.content}}</div>
            </div>
            <div style="font-size: 14px">{{item.send_time}}</div>
          </div>

          <v-btn
              rounded
              outlined
              small
              color="primary"
              @click="delete_notification(item.id)"
              style="float: right;margin-left: 3%"
          >删除消息</v-btn>
          <v-btn
              rounded
              outlined
              small
              color="primary"
              @click="update_is_read(item.id , !item.is_read)"
              style="float: right; "
          >{{item.is_read ? '标为未读' : '标为已读'}}</v-btn>

          <!--        <div style="color: mediumpurple;">{{item.send_time}}</div>-->

        </div>
        <v-divider style="margin-top: 1%;"></v-divider>

      </div>
    </div>

  </div>
</template>

<script>
import axios from "axios";
import authorization from "../api/authorization";

export default {
  data() {
    return {
      notification_list:[],
      only_show_not_read: false,
      user_id: "",
      hasLogin: null,
    }
  },
  mounted() {
    this.get_notification_list();
    // this.getTime();
  },
  methods: {
    ToProfile(id) {
      if(id !== null && id !== "") {
        this.$router.push({path: '/profile/' + id});
      }
    },
    get_notification_list() {
      const that = this;
      authorization()
          .then(function (response){
            that.hasLogin = response[0];
            if(response[0]){
              axios.get(
                  '/api/notification/user/',
                  {
                    headers: {
                      Authorization: 'Bearer ' + localStorage.getItem('access')
                    },
                  },
              )
                  .then(
                      (response) => {
                        console.log(response.data);
                        that.notification_list = response.data;
                        for(let i = 0 ; i < that.notification_list.length ; i++) {
                          let date=new Date(that.notification_list[i].send_time);
                          let year=date.getFullYear();
                          let mon=date.getMonth()+1;
                          let day=date.getDate();
                          let hour=date.getHours();
                          let min=date.getMinutes();
                          let sec=date.getSeconds();
                          mon=parseInt(mon)<10?"0"+mon:mon;
                          day=parseInt(day)<10?"0"+day:day;
                          hour=parseInt(hour)<10?"0"+hour:hour;
                          min=parseInt(min)<10?"0"+min:min;
                          sec=parseInt(sec)<10?"0"+sec:sec;
                          that.notification_list[i].send_time = year+"-"+mon+"-"+day+" "+hour+":"+min+":"+sec;
                        }
                      }
                  )
            }
          })
          .catch(function (){
            that.$notify.error({
              title: '登录状态失效',
              message: '快去登录'
            })
            that.$router.push({path: '/login'});
          })
    },
    update_is_read( id , status) {
      axios.patch(
          '/api/notification/' + id + '/',
          {
            is_read: status,
          }
      )
          .then(
              (response) => {
                console.log(response.data);
                this.get_notification_list(); // 重新请求,更新消息列表
                // this.$notify.success({
                //   title: status === true ? '已设为已读！' : '已标为未读！'
                // })
              }
          )
          .catch(
              (error) => {
                this.$notify.error({
                  title : '出错啦！',
                  message: error,
                })
              }
          )
    },
    delete_notification( id ) {
      axios.delete(
          '/api/notification/' + id + '/',
      )
          .then(
              (response) => {
                console.log(response.data);
                this.get_notification_list(); // 重新请求,更新消息列表
                this.$notify.success({
                  title: '已删除！'
                })
              }
          )
          .catch(
              (error) => {
                this.$notify.error({
                  title : '出错啦！',
                  message: error,
                })
              }
          )
    },
  },
}
</script>

<style scoped>

.message_title {
  display: flex;
  justify-content: space-between;
}

.message:hover {
  cursor: pointer;
  color: mediumpurple;
}

</style>